<template>
  <div>
    <el-button @click="changeData">切换数据</el-button>
    <div ref="radar" class="radar-class" />
  </div>
</template>

<script>
import * as echarts from 'echarts/core'
// 引入柱状图图表，图表后缀都为 Chart
import {
  RadarChart
} from 'echarts/charts'
// 引入提示框，标题，直角坐标系组件，组件后缀都为 Component
import {
  TitleComponent,
  TooltipComponent,
  GridComponent
} from 'echarts/components'
// 引入 Canvas 渲染器，注意引入 CanvasRenderer 或者 SVGRenderer 是必须的一步
import {
  CanvasRenderer
} from 'echarts/renderers'

// 注册必须的组件
echarts.use(
  [TitleComponent, TooltipComponent, GridComponent, RadarChart, CanvasRenderer]
)
const options = {
  title: {
    text: '乡村爱情'
  },
  radar: {
    // shape: 'circle',
    indicator: [
      { name: '唱', max: 100 },
      { name: '跳', max: 100 },
      { name: 'Rap', max: 100 },
      { name: 'freestyle', max: 100 },
      { name: 'yoyo', max: 100 },
      { name: '111', max: 100 }
    ]
  },
  series: [{
    type: 'radar',
    data: [

    ]
  }]
}
export default {
  data() {
    return {
      falg: 0
    }
  },
  mounted () {
    this.darwcanvas()
  },
  beforeDestroy () {
    clearInterval(this.timer)
  },
  methods: {
    // 设置换数据
    changeData() {
      if (this.falg === 0) {
        this.timer = setInterval(this.loop, 1000)
        this.falg = 1
      } else {
        clearInterval(this.timer)
        this.falg = 0
      }
    },
    loop() {
      const data = []
      for (let i = 0; i < 3; i++) {
        const item = { name: `谢广坤${i}`, value: [] }
        for (let j = 0; j < 6; j++) {
          item.value.push(Math.floor(Math.random() * 100 + 1))
        }
        data.push(item)
      }
      options.series[0].data = data
      this.myChart.setOption(options)
    },
    darwcanvas() {
      this.myChart = echarts.init(this.$refs.radar)
      options.series[0].data = [
        {
          value: [42, 30, 20, 35, 50, 18],
          name: '谢广坤'
        },
        {
          value: [50, 14, 28, 26, 42, 21],
          name: '尼古拉斯赵四'
        }
      ]
      this.myChart.setOption(options)
    }
  }
}
</script>

<style lang="scss" scoped>
.radar-class {
  height: 400px;
  width: 100%;
}
</style>
